<script setup lang="tsx">
import { Form, FormSchema } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
import { reactive, watch } from 'vue'
import { getPaymentVoucherApi, uploadPaymentVoucherApi } from '@/api/financial'
import { useValidator } from '@/hooks/web/useValidator'
import { ElIcon, ElImage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { uploadFileApi } from '@/api/common'

const { required } = useValidator()

const props = defineProps({
  id: {
    type: Number,
    default: 0
  },
  type: {
    type: Number,
    default: 0
  }
})

const detail = ref<any>({})

const { formRegister, formMethods } = useForm()
const { setValues, getFormData, getElFormExpose } = formMethods

const getPaymentVoucher = async () => {
  const res = await getPaymentVoucherApi({ withdrawalBillId: props.id })
  detail.value = res
}

const imageUrl = ref('')
const schema = reactive<FormSchema[]>([
  {
    field: 'withdrawalBillId',
    hidden: true
  },
  {
    field: 'paymentNo',
    label: '打款单号',
    colProps: {
      span: 24
    },
    component: 'Input',
    formItemProps: {
      rules: [required()]
    }
  },
  {
    field: 'paymentImage',
    label: '打款凭证',
    colProps: {
      span: 24
    },
    component: 'Upload',
    componentProps: {
      action: '#',
      showFileList: false,
      httpRequest: async (e) => {
        const formData = new FormData()
        formData.append('file', e.file)
        const res = await uploadFileApi(0, formData)
        imageUrl.value = res.data
        setValues({ paymentImage: res.data })
      },
      slots: {
        default: () => (
          <>
            {imageUrl.value ? <img src={imageUrl.value} class="avatar" /> : null}
            {!imageUrl.value ? (
              <ElIcon class="avatar-uploader-icon" size="large">
                <Plus />
              </ElIcon>
            ) : null}
          </>
        )
      }
    },
    formItemProps: {
      rules: [required()]
    }
  },
  {
    field: 'remark',
    label: '备注',
    colProps: {
      span: 24
    },
    component: 'Input',
    componentProps: {
      type: 'textarea',
      rows: 2
    }
  }
])

const submit = async () => {
  const elForm = await getElFormExpose()
  const valid = await elForm?.validate().catch((err) => {
    console.log(err)
  })
  if (valid) {
    const formData = await getFormData()
    await uploadPaymentVoucherApi({ ...formData, withdrawalBillId: props.id })
  }
}

// 重置Form
const reset = async () => {
  imageUrl.value = ''
  const elForm = await getElFormExpose()
  setValues({ id: '' })
  elForm?.resetFields()
}

watch(
  () => props.type,
  (type) => {
    if (type === 1) return
    getPaymentVoucher()
  },
  {
    deep: true,
    immediate: true
  }
)

defineExpose({
  reset,
  submit
})
</script>

<template>
  <Form v-if="type === 1" @register="formRegister" :schema="schema" />
  <template v-else>
    <div class="flex text-14px py-2">
      <span>打款单号：</span>
      <span>{{ detail.paymentNo }}</span>
    </div>
    <div class="flex text-14px py-2">
      <span>打款时间：</span>
      <span>{{ detail.createTime }}</span>
    </div>
    <div class="flex text-14px py-2">
      <span>打款凭证：</span>
      <ElImage
        v-if="detail.paymentImage"
        :src="detail.paymentImage"
        fit="cover"
        class="w-45"
        lazy
        :preview-src-list="[detail.paymentImage]"
        preview-teleported
      />
    </div>
    <div class="flex text-14px py-2">
      <span>打款备注：</span>
      <span>{{ detail.remark }}</span>
    </div>
  </template>
</template>

<style scoped lang="less">
:deep(img.avatar) {
  width: 178px;
}

:deep(.el-upload) {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  transition: var(--el-transition-duration-fast);
}

:deep(.el-upload:hover) {
  border-color: var(--el-color-primary);
}

:deep(.el-icon.avatar-uploader-icon) {
  width: 178px;
  height: 178px;
  font-size: 28px;
  color: #8c939d;
  text-align: center;
}
</style>
